<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <div class="tableBar">
          <label style="margin-right: 10px">套餐名称：</label>
          <el-input v-model="input" placeholder="请填写套餐名称" style="width: 14%" clearable @clear="init"
            @keyup.enter.native="initFun" />

          <label style="margin-right: 10px; margin-left: 20px">套餐分类：</label>
          <el-select v-model="categoryId" style="width: 14%" placeholder="请选择" clearable @clear="init">
            <el-option v-for="item in setmealCategoryList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <label style="margin-right: 10px; margin-left: 20px">套餐状态：</label>
          <el-select v-model="setmealStatus" style="width: 14%" placeholder="请选择" clearable @clear="init">
            <el-option v-for="item in saleStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button class="normal-btn continue" @click="init()">
            查询
          </el-button>

          <div class="tableLab">
            <span class="delBut non" @click="deleteHandle('批量', null)">批量删除</span>

            <el-button type="primary" style="margin-left: 15px"  @click="addSetmealtype('add')">
              + 新增套餐
            </el-button>
          </div>
        </div>
      </div>
      <el-table v-if="tableData.length" :data="tableData" stripe class="tableBox"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="25" />
        <el-table-column prop="name" label="套餐名称" />
        <el-table-column prop="image" label="图片">
          <template slot-scope="{ row }">
            <el-image style="width: 80px; height: 40px; border: none; cursor: pointer" :src="row.image">
              <div slot="error" class="image-slot">
                <img src="./../../assets/noImg.png" style="width: auto; height: 40px; border: none">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="套餐分类" />
        <el-table-column label="售价">
          <template slot-scope="scope">
            <span style="margin-right: 10px">￥{{ (scope.row.price ).toFixed(2)*100/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="售卖状态">
          <template slot-scope="scope">
            <div class="tableColumn-status" :class="{ 'stop-use': String(scope.row.status) === '0' }">
              {{ String(scope.row.status) === '0' ? '停售' : '启售' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间" />
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="blueBug" @click="addSetmealtype(scope.row.id)">
              修改
            </el-button>
            <el-button type="text" size="small" class="delBut" @click="deleteHandle('单删', scope.row.id)">
              删除
            </el-button>
            <el-button type="text" size="small" class="non" :class="{
                         blueBug: scope.row.status == '0',
                         delBut: scope.row.status != '0'
                       }" @click="statusHandle(scope.row)">
              {{ scope.row.status == '0' ? '启售' : '停售' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-if="counts > 10" class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Vue
  } from 'vue-property-decorator'

  import {
    setmealCategoryList,
    getSetmealPage,
    enableOrDisableSetmeal,
    deleteSetmeal
  } from '@/api/setMeal'
  @Component({
    name: 'SetmealType'
  })
  export default class extends Vue {
    private input: any = ''
    private categoryId = ''
    private setmealStatus = ''
    private setmealCategoryList = []
    private tableData: [] = []
    private counts: number = 0
    private page: number = 1
    private pageSize: number = 10

    private checkList: string[] = [] //选中的列表
    private saleStatus: any = [{
        value: 0,
        label: '停售'
      },
      {
        value: 1,
        label: '启售'
      }
    ]


    created() {
      this.init()
      this.getSetmealCategoryList()
    }


    //获取菜品分类下拉数据
    private getSetmealCategoryList() {
      setmealCategoryList({
          type: 2
        })
        .then(res => {
          if (res && res.data && res.data.code === 1) {
            this.setmealCategoryList = (
              res.data &&
              res.data.data &&
              res.data.data
            ).map(item => {
              return {
                value: item.id,
                label: item.name
              }
            })
          }
        })
        .catch(() => {})
    }
    private async init() {

      await getSetmealPage({
          page: this.page,
          pageSize: this.pageSize,
          name: this.input || undefined,
          categoryId: this.categoryId || undefined,
          status: this.setmealStatus
        })
        .then(res => {
          if (res.data.code === 1) {

            this.tableData = res.data && res.data.data && res.data.data.records
            this.counts = Number(res.data.data.total)
          }
        })
        .catch(err => {
          this.$message.error('请求出错了：' + err.message)
        })
    }

    //状态更改
    private statusHandle(row: any) {
      let params: any = {}
      const status = row.status == 0 ? 1 : 0;
      params.status = status;
      params.id = row.id
      this.$confirm('确认更改该套餐状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 起售停售---批量起售停售接口

        enableOrDisableSetmeal(params)
          .then(res => {
            if (res && res.data && res.data.code === 1) {
              this.$message.success('套餐状态已经更改成功！')
              this.init()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch(err => {
            this.$message.error('请求出错了：' + err.message)
          })
      })
    }
    // 删除
    private deleteHandle(type: string, id: any) {

      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$message.error('请选择删除对象')
        }
      }
      this.$confirm('确认删除该菜品, 是否继续?', '确定删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSetmeal(type === '批量' ? this.checkList.join(',') : id)
          .then(res => {
            if (res && res.data && res.data.code === 1) {
              this.$message.success('删除成功！')
              this.init()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch(err => {
            this.$message.error('请求出错了：' + err.message)
          })
      })
    }
    // 全部操作
    private handleSelectionChange(val: any) {
      console.log(val)
      let checkArr: any[] = []
      val.forEach((n: any) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    }
  // 添加
  private addSetmealtype(st: string) {
    if (st === 'add') {
      this.$router.push({ path: '/setmeal/add' })
    } else {
      this.$router.push({ path: '/setmeal/add', query: { id: st } })
    }
  }
    private handleSizeChange(val: any) {
      this.pageSize = val
      this.init()
    }

    private handleCurrentChange(val: any) {
      this.page = val
      this.init()
    }


  }

</script>
<style lang="scss">
  .el-table-column--selection .cell {
    padding-left: 10px;
  }

</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;

      .container {
        background: #fff;
        position: relative;
        z-index: 1;
        padding: 30px 28px;
        border-radius: 4px;

        .tableBar {
          margin-bottom: 20px;

          .tableLab {
            float: right;

            span {
              cursor: pointer;
              display: inline-block;
              font-size: 14px;
              padding: 0 20px;
              color: $gray-2;
            }
          }
        }

        .tableBox {
          width: 100%;
          border: 1px solid $gray-5;
          border-bottom: 0;
        }

        .pageList {
          text-align: center;
          margin-top: 30px;
        }

        //查询黑色按钮样式
        .normal-btn {
          background: #333333;
          color: white;
          margin-left: 20px;
        }
      }
    }
  }

</style>
